<!--  -->
<template>
  <div>
    <cu-custom
      :bgImage="bgImage"
      :needBack="true"
      bgColor="bgNormal"
      topTitle="消息通知"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <view class="content">
      <scroll-view
        class="scroll_content"
        scroll-y
        :style="{ height: scorllContentHeight }"
        v-if="noticeList.length > 0"
      >
        <view class="notice_list_container">
          <view
            class="notice_list"
            v-for="(item, index) in noticeList"
            :key="index"
            @click="toDeatil(item)"
          >
            <view class="">
              {{ item.title }}
            </view>
            <view class=""> 发布时间：{{ item.createTime }} </view>
          </view>
        </view>
        <view class="no_more">没有更多了</view>
      </scroll-view>
    </view>
  </div>
</template>

<script>
import { getNoReadMessageList } from "@/api/workBench";
export default {
  data() {
    return {
      scorllContentHeight: "", // 页面滚动高度
      noticeList: [],
    };
  },
  onShow() {
    this.getHeight();
    this.getList();
  },
  methods: {
    // 动态计算滚动高度
    getHeight() {
      this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px - 24rpx - 20rpx)`;
    },
    getList() {
      getNoReadMessageList({
        isRead: 0,
      }).then((res) => {
        if (res.code == 200) {
          this.noticeList = res.data;
        }
      });
    },
    // 详情
    toDeatil(data) {
      uni.navigateTo({
        url: `./detail?id=${data.id}`,
      });
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.content {
  margin-top: 24rpx;

  background: #f2f2f2;
  .scroll_content {
    .notice_list_container {
      padding: 0 30rpx;
      .notice_list {
        padding: 41rpx 0 45rpx 40rpx;
        background: #fff;
        border-radius: 8rpx;
        &:nth-child(n + 2) {
          margin-top: 17rpx;
        }
        &:last-child {
          margin-bottom: 10rpx;
        }
        view:first-child {
          font-size: 28rpx;
          color: #333;
        }
        view:last-child {
          font-size: 24rpx;
          color: #999;
          margin-top: 25rpx;
        }
      }
    }
  }
}
::v-deep {
  .u-load-more-wrap {
    margin: 10rpx 0 !important;
  }
}
.no_more {
  line-height: 50rpx;
  color: #606266;
  text-align: center;
}
</style>
